<template>
  <div class="calculator">
    <button @click="setCartItem(id, price, 'PLUS')">+</button>
    <input type="text" readonly :value="totalMount" />
    <button @click="setCartItem(id, price, 'MINUS')">-</button>
  </div>
</template>

<script>
export default {
  name: "Calculator",
  props: {
    id: Number,
    price: Number,
    totalMount: Number,
  },
  methods: {
    setCartItem(id, price, type) {
      this.$store.dispatch("setTotal", {
        price,
        type,
      });

      this.$store.dispatch("setCart", {
        id,
        price,
        type,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.calculator {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;

  input {
    width: 0.2rem;
    height: 0.2rem;
    font-size: 0.12rem;
    border: 0.01rem solid #999;
    text-align: center;
    margin: 0 0.1rem 0;
  }

  button {
    width: 0.2rem;
    height: 0.2rem;
    border: 0.01rem solid #999;
    border-radius: 50%;
    font-size: 0.14rem;
    line-height: 0.08rem;
    background-color: #fff;
  }
}
</style>